@forward './ep/index.scss';
@forward './variable.scss';

@use "sass:color";
@use "sass:map";

// $vi-color1: #646cff;
// $vi-height: 6em;

// @use 的前面只能出现 @forward 或 变量声明
// 其他的所有代码只能出现在 @use 之后

// @forward 的作用是转发模块成员，而不是引入成员到当前文件使用
// @forward 虽然对变量，mixin，函数等只能起转发作用，但对其他样式代码和 @use 一样，也会引入并编译
// 通过 @forward "module" as xxx-* 可以给同一个模块中的成员统一添加前缀。

// 用 mixin 定义计数器有序列表
@mixin list($item, $text-color:#5b5c60, $bg-color: #abd3fa, $radius: 50%) {
  box-sizing: border-box;
  list-style: none;
  counter-reset: num;
  text-align: left;
  #{$item} {
    counter-increment: num;
    @content;
    &::before {
      content: counter(num);
      display: inline-block;
      margin-right: .4em;
      padding: .1em;
      width: 1.4em;
      height: 1.4em;
      text-align: center;
      background-color: $bg-color;
      color: $text-color;
      @if $radius != 0 {
        border-radius: $radius;
      }
    }
  }
}

// @function 只能包含普遍陈述以及@return规则
// @return at 规则指示用作调用函数结果的值。
// 仅允许在 @function 主体内使用，并且每个 @function 必须以 @return 结尾
@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

// 内置模块 sass:color  sass:list  sass:map  sass:math  sass:meta  sass:selector  sass:string
// 全局函数 hsl hsla rgb rgba
// hsl($hue, $saturation, $lightness)   色相、饱和度、明度
// hsla($hue, $saturation, $lightness, $alpha: 1)
// 色相是 0deg 到 360deg（含）之间的数字
